<template>
  <el-dialog :title="title" :visible="visible" center :show-close="false" width="30%">
    <div v-if="isImage">
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="triggerFileInput">{{ fileButtonText }}</el-button>
        <el-button @click="closeDialog">云文件</el-button>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="sureDialog">确 定</el-button>
      </span>
    </div>
    <!-- 文件上传列表 -->
    <div v-if="isPDF">
      <!-- 邮件编辑部分 -->
      <div class="email-editor">
        <el-input v-model="emailTitle" placeholder="请输入标题" size="medium" style="margin-bottom: 10px;"></el-input>
        <el-input type="textarea" v-model="emailContent" placeholder="请输入内容" size="medium" rows="6"></el-input>
      </div>
      <div class="file-list">
        <ul v-if="fileList.length" style="padding-left: 0;">
          <li v-for="(file, index) in fileList" :key="index" style="display: flex;justify-content: space-between;">
            <!-- 文件名 -->
            <div> <span>{{ file.name }}</span> </div>
            <div>
              <!-- 可预览 -->
              <label> <input type="checkbox" v-model="fileAttrMap[file.name].enablePreview"> 可预览 </label>
              <!-- 可打印 -->
              <label> <input type="checkbox" v-model="fileAttrMap[file.name].enablePrint"> 可打印 </label>
              <!-- 可下载 -->
              <label> <input type="checkbox" v-model="fileAttrMap[file.name].enableDownload"> 可下载 </label>
              <!-- 添加水印 -->
              <label> <input type="checkbox" v-model="fileAttrMap[file.name].enableWatermark"> 添加水印 </label>
            </div>
          </li>
        </ul>
        <p v-else>尚未选择文件</p>
      </div>
      <!-- 按钮部分 -->
      <div class="action-buttons">
        <el-button type="primary" @click="chooseLocalFile">本地文件选择</el-button>
        <el-button type="primary" @click="closeDialog">云文件</el-button>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
      <!-- 隐藏的本地文件选择input -->
      <input ref="fileInput" type="file" multiple style="display: none;" @change="handleFileChange" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, required: true },
    title: { type: String, default: '发送文件' },
    fileType: { type: String, default: 'image' },
    chatSessionId: { type: String, required: true }
  },
  data () {
    return {
      emailTitle: '',  // 邮件标题
      emailContent: '',  // 邮件内容
      imageUrl: '', // 存储图片预览 URL
      pdfUrl: '', // 存储 PDF 预览 URL
      file: null, // 当前上传的文件
      fileList: [],
      fileAttrMap: {},

    };
  },
  computed: {
    isImage: {
      set (val) {
        console.log(val);
      },
      get () {
        return this.fileType === 'image';
      }
    },
    isPDF: {
      set (val) {
        console.log(val);
      },
      get () {
        return this.fileType === 'pdf';
      }
    },
    fileButtonText () {
      return this.isImage ? '上传图片' : '上传文件';
    },
    fileAccept () {
      return this.isImage ? 'image/*' : '.pdf';
    },
  },
  watch: {
    // 监听 fileList 的变化
    fileList (newFileList) {
      // 确保 fileAttrMap 与 fileList 同步
      newFileList.forEach((file) => {
        if (!this.fileAttrMap[file.name]) {
          this.$set(this.fileAttrMap, file.name, {
            enablePreview: true,
            enablePrint: true,
            enableDownload: true,
            enableWatermark: false
          });
        }
      });
    }
  },
  methods: {
    // 触发文件选择框
    triggerFileInput () {
      this.$refs.fileInput.click();
    },
    // 文件选择变化时的处理
    handleFileChange (event) {
      const files = Array.from(event.target.files);
      this.fileList = this.fileList.concat(files);  // 将选择的文件添加到文件列表中
      console.log(this.fileList, "fileListfileList");
    },
    // 本地文件选择（通过调用 input 的 click 事件）
    chooseLocalFile () {
      this.$refs.fileInput.click();
    },
    // 提交表单（包括文件和文本）
    async submitForm () {
      const token = sessionStorage.getItem('token')
      if (!this.$refs.fileInput.files.length) {
        this.$message.error('没有选择文件！');
        return;
      }
      if (this.emailContent === "" || this.emailTitle === "") {
        this.$message.error('标题或者内容为空!');
        return;
      }
      const formData = new FormData();

      // 添加文件
      this.fileList.forEach(file => {
        formData.append('file', file);
      });
      console.log(this.fileList[0]);
      const msg = {
        token,
        chatSessionId: this.chatSessionId,
        mediaType: 'FILE',
        title: this.emailTitle,
        content: this.emailContent,
        fileAttrMap: this.fileAttrMap
      }
      console.log(msg, this.fileAttrMap);
      // 将 msg 数据转为字符串，并添加到 FormData
      formData.append('msg', JSON.stringify(msg));
      // 打印 FormData 内容
      for (let [key, value] of formData.entries()) {
        console.log(key, value);
      }
      // 使用 fetch 发送 POST 请求
      try {
        // const data = await fetch('https://www.gykj-bj.com/test-wsim-service/api/chat/msg/send', {

        const data = await fetch('/test-wsim-service/api/chat/multi/send', {
          // const data = await fetch('/api/chat/multi/send', {
          method: 'POST',
          body: formData,
        })
        console.log(data);
        this.closeDialog();
        this.$message.success('文件发送成功!');

      } catch (error) {
        console.log(error);

      }
    },
    getAuthToken () {
      return sessionStorage.getItem('token');  // 假设 token 存储在 sessionStorage
    },
    // 上传前的文件校验
    beforeUpload (file) {
      const isImage = file.type.startsWith('image/');
      const isPDF = file.type === 'application/pdf';
      if (!isImage && !isPDF) {
        this.$message.error('只允许上传图片或PDF文件');
        return false;
      }
      if (file.size / 1024 / 1024 > 2) { // 限制文件大小为2M
        this.$message.error('文件大小不能超过2M');
        return false;
      }
      console.log(file);
      return true;
    },

    // 文件变化时的处理（如文件选择）
    handleChange (file, fileList) {
      this.fileList = fileList;
      this.file = file.raw;
      const fileType = file.raw.type;

      // 如果是图片文件
      if (fileType.startsWith('image/')) {
        this.isImage = true;
        this.isPDF = false;
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
        };
        reader.readAsDataURL(this.file);
      }
      // 如果是 PDF 文件
      else if (fileType === 'application/pdf') {
        this.isImage = false;
        this.isPDF = true;
        this.pdfUrl = URL.createObjectURL(this.file);
      }
    },
    // 处理文件选择
    //  handleFileChange(event) {
    //       const files = event.target.files;
    //       const file = files[0]; // 只处理单个文件

    //       if (!file) return; // 如果没有文件，直接返回

    //       // 检查文件类型
    //       if (
    //         (this.isImage && !file.type.startsWith('image/')) ||
    //         (!this.isImage && file.type !== 'application/pdf')
    //       ) {
    //         this.$message.error('请选择正确类型的文件'); // 提示信息
    //         return; // 如果文件类型不匹配，直接返回
    //       }

    //       // 重置文件信息
    //       this.imageUrl = '';
    //       this.pdfUrl = '';
    //       this.isImage = false;
    //       this.isPDF = false;

    //       const fileReader = new FileReader();

    //       if (file.type.startsWith('image/')) {
    //         this.isImage = true;
    //         this.isPDF = false;

    //         // 读取图片文件
    //         fileReader.onload = (e) => {
    //           this.imageUrl = e.target.result;
    //         };
    //         fileReader.readAsDataURL(file);
    //       } else if (file.type === 'application/pdf') {
    //         this.isImage = false;
    //         this.isPDF = true;

    //         // 读取 PDF 文件
    //         const objectURL = URL.createObjectURL(file);
    //         this.pdfUrl = objectURL;
    //       } else {
    //         this.$message.error('请选择图片或PDF文件');
    //       }

    //       // 存储文件信息
    //       this.file = file;
    //     },
    // 文件预览事件处理
    handlePreview (file) {
      console.log('文件预览:', file);
    },
    // 关闭弹框
    closeDialog () {
      this.fileList = [];  // 清空文件列表
      this.emailTitle = '';  // 清空标题
      this.emailContent = '';  // 清空内容
      this.$emit('update:visible', false); // 通过 update:visible 事件通知父组件关闭弹窗
    },

    // 确定按钮事件
    sureDialog () {
    
      this.$message.success('文件上传成功');
      console.log(this.file);
      // this.$refs.upload.submit();
      this.closeDialog();
      const formData = new FormData();
      const token = sessionStorage.getItem('token')

      // 添加常规字段
      formData.append('token', token);
      formData.append('chatSessionId', 'SIG#BEB42C040FA51B810A31D0D00E466CC1');
      formData.append('mediaType', 'FILE');
      formData.append('title', '发文测试');
      formData.append('content', '发文讨论');

      // 遍历每个文件，添加到 formData 中
      formData.append('file', this.file, this.file.name);

      // 获取文件名
      const fileName = this.file.name;

      // 文件的属性
      const fileAttributes = {
        enablePreview: true,
        enablePrint: true,
        enableDownload: true,
        enableWatermark: true
      };

      // 遍历文件的属性并将它们添加到 FormData 中，关联到文件名
      for (let key in fileAttributes) {
        if (Object.prototype.hasOwnProperty.call(fileAttributes, key)) {
          formData.append(`${fileName}-${key}`, fileAttributes[key]);
        }
      }
      formData.forEach((value, key) => {
        console.log(key, value);
      });

      // Send the request
      this.$http.post('/chat/multi/send', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then(response => {
        console.log(response);

        this.$message.success('文件上传成功');
        this.closeDialog();
      }).catch(error => {
        console.log(error.msg);
        this.$message.error('文件上传失败');
      });
    },
  },
  mounted () {
    // 初始化时确保 fileAttrMap 与 fileList 同步
    this.$nextTick(() => {
      this.fileList.forEach((file) => {
        if (!this.fileAttrMap[file.name]) {
          this.$set(this.fileAttrMap, file.name, {
            enablePreview: false,
            enablePrint: false,
            enableDownload: false,
            enableWatermark: false
          });
        }
      });
    });
  }
};
</script>
<style scoped lang="scss">
::v-deep.upload-demo {
  display: inline-block;
  padding: 8px 15px !important;
}
</style>